<template>
  <div class="boy">
    <h2 class="title" >男生榜单</h2>
    <div class="boy-box">
      <van-tabs
        line-width="30px"
        title-active-color="#5c55ff"
        title-inactive-color="#333"
        color="#5c55ff"
        @click="switchType"
      >
        <van-tab v-for="(item,index) in boyTypesData" :title="item.name" :key="index">
          <div class="boyType-box">
            <div class="boy-item" v-for="(item,index) in boyComicsTypeData" :key="index" @click="linkToDetail(item.item_id)">
              <div class="item-img">
                <img v-lazy="item.image" />
              </div>
              <div class="item-text">
                <h3 class="name">{{ item.title }}</h3>
                <p>
                  {{item.comic_info.is_finish===1?"共"+item.comic_info.lastest_short_title
                  +'话完结':"更新至"+item.comic_info.lastest_short_title+"话"}}
                </p>
              </div>
              <div class="item-decision">
                <p v-if="item.comic_info.decision">{{item.comic_info.decision}}</p>
                <p v-if="item.comic_info.decision==''">暂无评分</p>
              </div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import { getBoyGirlcomics, getBoyGirlcomicsType } from "@/api/api";
export default {
  name: "Boy",
  data() {
    return {
      boyTypesData: [],
      boyComicsTypeData: [],
      itemIndex: 0
    };
  },
  created() {
    let tabId = this.$route.query.id;
    //获取男生模块的漫画类型内容
    getBoyGirlcomics(tabId)
      .then(res => {
        this.boyTypesData = res.data.data.layout;
        let id = this.boyTypesData[this.itemIndex].id;
        //获取男生频道二级分类筛选漫画
        this.getBoyCoimcs(id)
      })
      .catch(err => {
        console.log(err);
      });
  },
  methods: {
    //切换男生榜漫画类型
    switchType(index) {
        if (this.itemIndex === index) {
        return;
      }
      this.itemIndex = index;
      let id = this.boyTypesData[this.itemIndex].id;
      this.getBoyCoimcs(id)
    },
    //获取男生频道二级分类筛选漫画
    getBoyCoimcs(id){
      getBoyGirlcomicsType(id)
        .then(res => {
          this.boyComicsTypeData = res.data.data.comics;
          console.log(this.boyComicsTypeData )
        })
        .catch(err => {
          console.log(err);
        });
    },
    //获取漫画小说的id跳转到详情页
    linkToDetail(id) {
      let path="/detail"
      this.$router.push({path,query:{comicId:id,path:this.$route.fullPath}})
    }
  }
};
</script>

<style lang="scss" scoped>
.boy {
  .title {
    text-align: center;
    color: #5c55ff;
    background: rgba(255, 255, 255, 0.8);
    height: 40px;
    line-height: 40px;
    margin-bottom: 8px;
    box-shadow: 0 0 10px 0 #000;
    position: relative;
    &::after {
      content: "";
      position: absolute;
      bottom: -19px;
      left: 50%;
      transform: translate(-50%, 0);
      border: 10px solid transparent;
      border-top: 10px solid rgba(255, 255, 255, 0.8);
    }
  }

  .boy-box {
    height: 500px;
    background: #fff;
  }
  .boyType-box {
    padding: 10px;
    padding-bottom: 50px;
    .boy-item {
      border-radius: 4px;
      display: flex;
      background: #f1f1f1;
      margin-bottom: 10px;
      overflow: hidden;
      .item-img {
        width: 120px;
        img {
          width: 100%;
          vertical-align: bottom;
        }
      }
      .item-text {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex: 7;
        margin-left: 10px;
        .name {
          font-size: 16px;
          letter-spacing: 2px;
        }
        p {
          font-size: 14px;
        }
      }
      .item-decision {
        flex: 1;
        border-left: 1px solid #fff;
        p {
          width: 48px;
          line-height: 48px;
          margin: 0;
          font-size: 16px;
          writing-mode: vertical-rl;
          text-orientation: upright;
          color: #ff3f3f;
          text-align: center;
          height: 160px;
          font-weight: bold;
        }
      }
    }
  }
}
</style>